<template>
  <a-space direction="vertical">
    <Breadcrumb :items="['search.advanced.breadcrumb.home', 'search.advanced.breadcrumb.search']" />
    <a-space class="search-body" align="top">
      <div class="search-detail">
        <a-list item-layout="horizontal" :data-source="searchQuery">
          <template #renderItem="{ item, index }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-select v-model:value="item.operator" style="width: 80px">
                    <a-select-option value="add">与</a-select-option>
                    <a-select-option value="or">或</a-select-option>
                    <a-select-option value="not">非</a-select-option>
                  </a-select>
                </template>
                <template #title>
                  <a-space>
                    <a-select v-model:value="item.key" style="width: 168px">
                      <a-select-option v-for="(value, key) in keyNameMap" :key="key" :value="key">{{ value }}</a-select-option>
                    </a-select>
                    <a-input v-model:value="item.value" placeholder="请输入" />
                  </a-space>
                </template>
              </a-list-item-meta>
              <template #actions>
                <PlusCircleOutlined :style="{ fontSize: '18px' }" @click="handleAdd(index)" />
                <MinusCircleOutlined :style="{ fontSize: '18px' }" @click="handleDelete(index)" />
              </template>
            </a-list-item>
          </template>
        </a-list>
        <a-space style="justify-content: right">
          <a-button type="primary" danger @click="handleSearch">搜索</a-button>
          <a-button type="link" @click="handleReset">重置条件</a-button>
        </a-space>
      </div>
      <div class="search-tips">
        <a-card :title="$t('search.advanced.tip.title')">
          {{ $t("search.advanced.tip.content") }}
        </a-card>
      </div>
    </a-space>
  </a-space>
</template>

<script setup lang="ts" name="AdvancedSearch">
import { ref, toRaw } from "vue"
import { PlusCircleOutlined, MinusCircleOutlined } from "@ant-design/icons-vue"
import { message } from "ant-design-vue"
import { addSearchHistory } from "@/api/search"
import { useUserStore } from "@/store"
import { SearchQueryItem } from "@/api/search/type"
import router from "@/router"

const keyNameMap = {
  name: "药膳名称",
  Medifood_recipe: "配方",
  desc: "基本描述",
  indication: "适应症",
  Medifood_aroma: "药膳香味",
  Medifood_usage: "用法",
  treated_disease: "治疗疾病",
  Medifood_color: "药膳颜色",
  Medifood_flavor: "药膳味道",
  Associated_symptoms: "关联症状",
  Edible_method: "食用方法",
  treatment_site: "治疗部位"
}
const searchQuery = ref<SearchQueryItem[]>([
  {
    operator: "and",
    key: "name",
    value: ""
  }
])

const handleDelete = (index: number) => {
  if (index === 0) return
  searchQuery.value.splice(index, 1)
}

const handleAdd = (index: number) => {
  index = index - 1 >= 0 ? index - 1 : 0
  if (!searchQuery.value[index].value) {
    return message.warning("请输入检索内容")
  }
  searchQuery.value.push({
    operator: "and",
    key: "name",
    value: ""
  })
}
const handleReset = () => {
  searchQuery.value = [
    {
      operator: "and",
      key: "all",
      value: ""
    }
  ]
}
const userStore = useUserStore()
const handleSearch = () => {
  addSearchHistory({
    user_id: userStore.id! as any,
    search_query: toRaw(searchQuery.value)
  }).then(res => {
    console.log(res)
    router.push({
      name: "DetailCategory",
      query: { advancedSearch: res.data._id }
    })
  })
}
</script>

<style scoped lang="scss">
:deep(.search-body > .ant-space-item:first-child) {
  flex: 1;
}
:deep(.ant-list-item-meta-title .ant-space-item:last-child) {
  flex: 1;
}
.search-tips {
  width: 326px;
  :deep(.ant-card-body) {
    font-size: 13px;
    line-height: 26px;
  }
}
</style>
